<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span></div>
    <div class="q-pa-sm shadow-2 row">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" v-if="isViewOrEditMode" />
      </div>
    </div>
    <!--主要信息显示头-->
    <div class="q-pa-sm shadow-2 row q-my-md" v-if="isViewOrEditMode">
      <div class="row q-gutter-sm">
        <div class="row searchbar-label">
          <div class="q-mr-xs searchbar-label">货主</div>
          <q-input :hide-bottom-space="true" readonly dense :maxlength="40" outlined square stack-label
            v-model="$d.form.storerAbbrName" />
        </div>
        <div class="row searchbar-label">
          <div class="q-mr-xs searchbar-label">料号</div>
          <q-input :hide-bottom-space="true" readonly dense :maxlength="40" outlined square stack-label
            v-model="$d.form.sku" />
        </div>
        <div class="row searchbar-label">
          <div class="q-mr-xs searchbar-label">品名</div>
          <q-input :hide-bottom-space="true" readonly dense :maxlength="40" outlined square stack-label
            v-model="$d.form.skuName" />
        </div>
      </div>
    </div>
    <div :class="isCreateMode ? 'q-mt-md' : ''" class="shadow-2">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab :label="'料号' + pageSubTitle" name="sku" />
        <q-tab label="原厂料号" name="skuMfList" v-if="isViewOrEditMode" />
        <q-tab :label="ldsMfOrg.tabTitle.value" name="skuMfDetail" v-if="ldsMfOrg.isLineTabDisp.value" />
        <q-tab label="先进先出" name="skuFifoList" v-if="isViewOrEditMode" />
        <q-tab :label="ldsMfContact.tabTitle.value" name="skuFifoDetail" v-if="ldsMfContact.isLineTabDisp.value" />
        <q-tab label="规则配置" name="ruleConfig" v-if="isViewOrEditMode" />
        <q-tab label="附件" name="accessory" v-if="isViewOrEditMode" />
      </q-tabs>
      <q-separator />
      <q-tab-panels v-model="showingTabPanel" keep-alive
        :keep-alive-include="['sku','skuMfList','skuFifoList', 'ruleConfig' ,'accessory']">
        <!--主档-->
        <q-tab-panel class="q-pa-sm" name="sku">
          <div class="q-gutter-sm">
            <q-btn :disable="submittingState" :loading="submittingState" @click="doSkuSubmit" color="primary"
              label="确定" v-if="isCreateOrEditMode" />
            <q-btn :disable="submittingState" @click="detailNav.cancelSubmit" color="primary" label="取消" outline
              v-if="isEditMode" />
            <q-btn :disable="loadingState" @click="detailNav.goEditMode" color="primary" icon="edit" label="编辑"
              v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit') && isViewMode" />
            <q-btn :disable="loadingState" @click="deleteSku" color="red" icon="delete_outline" label="删除"
              v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit') && isViewMode" />
          </div>
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessage">
            {{ serverErrorMessage }}
            <template v-slot:action>
              <q-btn @click="serverErrorMessage=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>
          <form-field-group :model-with-create-update="$d.form" class="q-mt-sm" model-id="skuId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>料号</span>
                  <easy-input v-model="$d.form.sku" :readonly="isViewOrEditMode" :maxlength="40" autofocus
                    :error="v$.sku.$error" :error-message="e$(v$.sku.$errors)"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>货主</span>
                  <simple-filter-select :error="v$.storerId.$error" :error-message="e$(v$.storerId.$errors)"
                    :options="$d.storerDropdownList" :readonly="isViewMode || $d.form.isUsed"
                    :search-label-and-value="true" option-label="abbrName" option-value="mfId"
                    v-model="$d.form.storerId" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>品牌</span>
                  <simple-filter-select :options="$d.brandDropdownList" :readonly="isViewMode" :use-filter="false"
                    option-label="brandName" option-value="brandId" v-model="$d.form.brandId" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>品名</span>
                  <easy-input v-model="$d.form.skuName" :readonly="isViewMode" :maxlength="40"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>规格型号</span>
                  <easy-input v-model="$d.form.spec" :readonly="isViewMode" :maxlength="40"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>英文品名</span>
                  <easy-input v-model="$d.form.skuNameE" :readonly="isViewMode" :maxlength="40"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>有效</span>
                  <div class="bg-grey-3">
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary q-pa-xs" dense
                      v-model="$d.form.isEnabled" />
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>允许跨批次拣货</span>
                  <div class="bg-grey-3">
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary q-pa-xs" dense
                      v-model="$d.form.allowMultilotPick" />
                  </div>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm" v-if="isViewMode && props.enableWmsSkuPicture">
                <div class="col-12">
                  <span>图片</span>
                  <div class="q-gutter-sm row items-start">
                    <q-img :key="uuid" :src="fx.appCfg.apiBaseUrl +  `/comm/fms/file/`+ uuid"
                      class="rounded-borders simple-border thumb-pic-size cursor-pointer sku-pic-size" ratio="1"
                      spinner-color="grey-6"
                      v-for="uuid in $d.form.pictures" @click="showPicture(uuid)">
                      <div class="absolute-bottom-right" style="padding:0">
                        <q-btn @click.stop="deletePicture(uuid)" color="white" dense flat
                          icon="delete_forever" size="sm" square
                          v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')">
                        </q-btn>
                      </div>
                    </q-img>
                    <q-btn @click="showingPicturesUploadDlg = true; errorMessageForPicturesUpload = null"
                      class="sku-pic-size" color="primary" icon="add" outline
                      v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')"></q-btn>
                  </div>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="详细规格">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>上架储位编号</span>
                  <simple-filter-select
                    :readonly="isViewMode"
                    option-label="loc"
                    option-value="locId"
                    v-model="$d.form.paLocId"
                    server-side-url="/wms/basic/loc/get-loc-simple-list"
                    search-content-field="loc"
                    resp-data-field="locs"
                    :req-params="{pageNo:1,pageSize:10}"
                    :options="$d.locDropdownList" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>料号主分类</span>
                  <simple-filter-select :options="$d.skuCategoryDropdownList" :readonly="isViewMode"
                    :allowRawText="true" option-label="codeName1" option-value="codeValue"
                    v-model="$d.form.category" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>料号次分类</span>
                  <simple-filter-select :options="$d.skuSubCategoryDropdownList" :readonly="isViewMode"
                    :allowRawText="true" option-label="codeName1" option-value="codeValue"
                    v-model="$d.form.subCategory" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>产品线</span>
                  <simple-filter-select :allowRawText="true" :options="$d.productLineDropdownList"
                    :readonly="isViewMode" option-label="codeName1" option-value="codeValue"
                    v-model="$d.form.productLine" />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>产地国</span>
                  <simple-filter-select :option-label="(item) => item.codeName2 + '(' + item.codeName1 + ')'"
                    :options="$d.cooDropdownList" :readonly="isViewMode" :search-label-and-value="true"
                    option-value="codeValue" v-model="$d.form.coo" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>计量单位</span>
                  <simple-filter-select :option-label="(item) => item.codeValue + '-' + item.codeName1"
                    :options="$d.uomDropdownList" :readonly="isViewMode" :search-label-and-value="true"
                    option-value="codeValue" v-model="$d.form.uom" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>成品/原材料</span>
                  <simple-filter-select :options="$d.finalOrMaterialDropdownList" :readonly="isViewMode"
                    :use-filter="false" v-model="$d.form.finalOrMaterial" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>检验/免检</span>
                  <simple-filter-select :options="$d.inspectionOrFreeDropdownList" :readonly="isViewMode"
                    :use-filter="false" v-model="$d.form.inspectionOrFree" />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>最小订购量</span>
                  <easy-input v-model="$d.form.moq" :readonly="isViewMode" :maxlength="40"
                    :error="v$.moq.$error" :error-message="e$(v$.moq.$errors)"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>最小安全库存量</span>
                  <easy-input v-model="$d.form.minSafetyStock" :readonly="isViewMode" :maxlength="40"
                    :error="v$.minSafetyStock.$error" :error-message="e$(v$.minSafetyStock.$errors)"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>最大安全库存量</span>
                  <easy-input v-model="$d.form.maxSafetyStock" :readonly="isViewMode" :maxlength="40"
                    :error="v$.maxSafetyStock.$error" :error-message="e$(v$.maxSafetyStock.$errors)"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>理货包装规格</span>
                  <simple-filter-select :options="fx.lst.packageTypeDropdownList" :use-filter="false"
                    v-model="$d.form.packageTypeForSettle"
                    :auto-select-single-option="false" :readonly="isViewMode" />
                </div>
              </div>
              <!--              <div class="row q-col-gutter-sm q-pt-sm">-->
              <!--                <div class="col-12 col-sm-6 col-md-4 col-lg-3">-->
              <!--                  <span>净重(kg)</span>-->
              <!--                  <easy-input v-model="$d.form.nw" :readonly="isViewMode" :maxlength="40"-->
              <!--                    :error="v$.nw.$error" :error-message="e$(v$.nw.$errors)"></easy-input>-->
              <!--                </div>-->
              <!--                <div class="col-12 col-sm-6 col-md-4 col-lg-3">-->
              <!--                  <span>毛重(kg)</span>-->
              <!--                  <easy-input v-model="$d.form.gw" :readonly="isViewMode" :maxlength="40"-->
              <!--                    :error="v$.gw.$error" :error-message="e$(v$.gw.$errors)"></easy-input>-->
              <!--                </div>-->
              <!--                <div class="col-12 col-sm-6 col-md-4 col-lg-3">-->
              <!--                  <span>体积(m³)</span>-->
              <!--                  <easy-input v-model="$d.form.cube" :readonly="isViewMode" :maxlength="40"-->
              <!--                    :error="v$.cube.$error" :error-message="e$(v$.cube.$errors)"></easy-input>-->
              <!--                </div>-->
              <!--                <div class="col-12 col-sm-6 col-md-4 col-lg-3">-->
              <!--                  <span>面积(平方米)</span>-->
              <!--                  <easy-input v-model="$d.form.area" :readonly="isViewMode" :maxlength="40"-->
              <!--                    :error="v$.area.$error" :error-message="e$(v$.area.$errors)"></easy-input>-->
              <!--                </div>-->
              <!--              </div>-->
              <div class="row q-col-gutter-sm q-pt-sm">
                <!--                <div class="col-12 col-sm-6 col-md-4 col-lg-3">-->
                <!--                  <span>长</span>-->
                <!--                  <easy-input v-model="$d.form.length" :readonly="isViewMode" :maxlength="40"-->
                <!--                    :error="v$.length.$error" :error-message="e$(v$.length.$errors)"></easy-input>-->
                <!--                </div>-->
                <!--                <div class="col-12 col-sm-6 col-md-4 col-lg-3">-->
                <!--                  <span>宽</span>-->
                <!--                  <easy-input v-model="$d.form.height" :readonly="isViewMode" :maxlength="40"-->
                <!--                    :error="v$.height.$error" :error-message="e$(v$.height.$errors)"></easy-input>-->
                <!--                </div>-->
                <!--                <div class="col-12 col-sm-6 col-md-4 col-lg-3">-->
                <!--                  <span>高</span>-->
                <!--                  <easy-input v-model="$d.form.width" :readonly="isViewMode" :maxlength="40"-->
                <!--                    :error="v$.width.$error" :error-message="e$(v$.width.$errors)"></easy-input>-->
                <!--                </div>-->
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>周转率</span>
                  <simple-filter-select :options="$d.abcDropdownList" :readonly="isViewMode" :use-filter="false"
                    v-model="$d.form.abc" />
                </div>

              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="其它信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>自定义1</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.form.userDef1">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>自定义2</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.form.userDef2">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>自定义3</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.form.userDef3">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>自定义4</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.form.userDef4">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>自定义5</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.form.userDef5">
                  </q-input>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12">
                  <span>描述</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" autogrow dense :maxlength="300" outlined
                    square stack-label type="textarea" v-model="$d.form.descriptions"></q-input>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="包装规格">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>包装规格</span>
                  <simple-filter-select :error="v$.packageId.$error" :error-message="e$(v$.packageId.$errors)"
                    :hide-bottom-space="true" :readonly="isViewMode" :options="$d.packageDropdownList"
                    option-label="packageCode" option-value="packageId" v-model="$d.form.packageId"
                    server-side-url="/wms/basic/package/get-package-simple-list" :emit-value="false"
                    search-content-field="packageCode" resp-data-field="packages" @update:modelValue="onPackageChange"
                    :req-params="{pageNo:1,pageSize:10}"
                  />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>包装形态</span>
                  <simple-filter-select :options="packageTypeDropdownList" readonly :use-filter="false"
                    v-model="$d.form.skuPackage.packageType" />
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>单件装量</span>
                  <easy-input v-model="$d.form.skuPackage.qtyPEa" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>单件名称</span>
                  <easy-input v-model="$d.form.skuPackage.eaName" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>单件体积</span>
                  <easy-input v-model="$d.form.skuPackage.cube" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>单件毛重</span>
                  <easy-input v-model="$d.form.skuPackage.gw" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>单件净重</span>
                  <easy-input v-model="$d.form.skuPackage.nw" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>单件体积单位</span>
                  <easy-input v-model="$d.form.skuPackage.cubeIsoUnit" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>单件重量单位</span>
                  <easy-input v-model="$d.form.skuPackage.weightIsoUnit" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>内盒装量</span>
                  <easy-input v-model="$d.form.skuPackage.qtyPIip" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>内盒名称</span>
                  <easy-input v-model="$d.form.skuPackage.iipName" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>内盒长</span>
                  <easy-input v-model="$d.form.skuPackage.iipL" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>内盒宽</span>
                  <easy-input v-model="$d.form.skuPackage.iipW" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>内盒高</span>
                  <easy-input v-model="$d.form.skuPackage.iipH" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>内盒长宽高单位</span>
                  <easy-input v-model="$d.form.skuPackage.iipIsoUnit" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>盒装量</span>
                  <easy-input v-model="$d.form.skuPackage.qtyPIp" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>盒名称</span>
                  <easy-input v-model="$d.form.skuPackage.ipName" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>盒长</span>
                  <easy-input v-model="$d.form.skuPackage.ipL" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>盒宽</span>
                  <easy-input v-model="$d.form.skuPackage.ipW" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>盒高</span>
                  <easy-input v-model="$d.form.skuPackage.ipH" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>盒长宽高单位</span>
                  <easy-input v-model="$d.form.skuPackage.ipIsoUnit" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>箱装量</span>
                  <easy-input v-model="$d.form.skuPackage.qtyPCase" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>箱名称</span>
                  <easy-input v-model="$d.form.skuPackage.caseName" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>箱长</span>
                  <easy-input v-model="$d.form.skuPackage.caseL" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>箱宽</span>
                  <easy-input v-model="$d.form.skuPackage.caseW" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>箱高</span>
                  <easy-input v-model="$d.form.skuPackage.caseH" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>箱长宽高单位</span>
                  <easy-input v-model="$d.form.skuPackage.caseIsoUnit" readonly/>
                </div>
              </div>
            </div>
          </form-field-group>
          <form-field-group class="q-mt-md" title="SAP料号扩展信息" v-if="isViewMode">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>SAP推送的长</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.formExt.sapLength">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>SAP推送的宽</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.formExt.sapWidth">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>SAP推送的高</span>
                  <q-input :hide-bottom-space="true" :readonly="isViewMode" dense :maxlength="40" outlined square
                    stack-label v-model="$d.formExt.sapHeight">
                  </q-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>是否异形箱</span>
                  <div class="bg-grey-3">
                    <q-checkbox :disable="isViewMode" class="full-width q-pa-xs" color="primary q-pa-xs" dense
                      v-model="$d.formExt.isSpecialShapedCase" />
                  </div>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <!--原厂料号列表-->
        <q-tab-panel class="q-pa-none" name="skuMfList" v-if="isViewOrEditMode">
          <q-table :columns="columnsInfoSkuMf" :rows="$d.form.skuMfs" v-model:pagination="$d.paginationInfoSkuMf"
            :hide-pagination="true" @row-dblclick="(evt,row)=>{ldhMfOrg.lineDetailNav.goViewLine(row.skuMfId)}" dense
            flat :visible-columns="$d.columnsInfoSkuMf" :loading="loadingState" v-model:selected="$d.selectedSkuMfs"
            color="primary" row-key="skuMfId" selection="multiple" separator="cell">
            <template v-slot:body-selection="scope" >
              <q-checkbox dense v-model="scope.selected" @dblclick.stop />
            </template>
            <template v-slot:top="props">
              <div class="q-gutter-sm">
                <q-btn @click="createSkuMf" color="primary" icon="add" label="新建明细"
                  v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')" :disable="loadingState" />
                <q-btn :disable="$d.selectedSkuMfs.length===0 || loadingState" @click="onDeleteSkuMfs" color="red"
                  icon="delete_outline" label="删除明细" v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')" />
              </div>
              <q-space />
              <table-col-options-cfg v-model:table-columns="columnsInfoSkuMf"
                v-model:visible-columns="$d.columnsInfoSkuMf"
                @update-col-options-for-save="(optToSave)=>dlAssist.saveDetailColOptions('skuMfList',optToSave)"
                class="q-ml-sm">
              </table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                :title="props.inFullscreen ? '退出全屏' : '全屏显示'" class="q-ml-sm" dense flat :ripple="false" />
            </template>
            <template v-slot:body-cell-operation="props">
              <q-td :props="props" auto-width>
                <q-btn :dense="true" :disable="loadingState" class="btn-in-row"
                  @click="ldhMfOrg.lineDetailNav.goViewLine(props.row.skuMfId)" color="primary" label="查看" />
                <q-btn :dense="true" :disable="loadingState"
                  @click="ldhMfOrg.lineDetailNav.goEditLine(props.row.skuMfId)" class="q-ml-xs btn-in-row" color="primary"
                  label="编辑" v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')" />
              </q-td>
            </template>
            <!--状态列插槽-->
            <template v-slot:body-cell-isEnabled="props">
              <q-td :props="props" auto-width>
                <q-badge :color="props.row.isEnabled ? 'positive' : 'negative'"
                  :label="props.row.isEnabled ? '有效' : '无效'" />
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <template v-slot:bottom>
              <paging-bar :loading-state="loadingState" :pageNo="$d.paginationInfoSkuMf.page"
                :pageSize="$d.paginationInfoSkuMf.rowsPerPage" :restrict-input-page-no="true"
                :show-refresh-button="false" :totalAmount="$d.form.skuMfs.length"
                @go-to-page="(pageNo)=>{$d.paginationInfoSkuMf.page=pageNo}"
                @pagesize-changed="(pageSize)=>{$d.paginationInfoSkuMf.rowsPerPage=pageSize; dlAssist.saveDetailPageSize('skuMfList',pageSize)}" />
            </template>
          </q-table>
        </q-tab-panel>
        <!--原厂料号详情-->
        <q-tab-panel class="q-pa-sm" name="skuMfDetail">
          <div class="q-gutter-sm">
            <q-btn @click="ldhMfOrg.lineDetailNav.backToListTab" color="primary" icon="close" outline title="关闭"
              v-if="ldsMfOrg.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfOrg" :loading="lineLoadingStateMfOrg"
              @click="loadLineModelDataMfOrg" color="primary" dense
              icon="refresh" outline title="刷新" v-if="ldsMfOrg.isLineViewOrEditMode.value" />
            <q-btn :loading="submittingStateMfOrg" @click="doMfOrgLineSubmit" color="primary" label="确定"
              v-if="ldsMfOrg.isLineCreateOrEditMode.value" />
            <q-btn :disable="submittingStateMfOrg" @click="ldhMfOrg.lineDetailNav.cancelLineSubmit" label="取消" outline
              v-if="ldsMfOrg.isLineCreateOrEditMode.value" color="primary" />
            <q-btn :disable="lineLoadingStateMfOrg" @click="ldhMfOrg.lineDetailNav.turnLineToEditMode()"
              color="primary" icon="edit" label="编辑"
              v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit') && ldsMfOrg.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfOrg"
              @click="onDeleteSkuMf(ldhMfOrg.lineDetailInfo.lineItemId)" color="red" icon="delete_outline" label="删除"
              v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit') && ldsMfOrg.isLineViewMode.value" />
          </div>
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessageMfOrg">
            {{ serverErrorMessageMfOrg }}
            <template v-slot:action>
              <q-btn @click="serverErrorMessageMfOrg=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>

          <form-field-group :model-with-create-update="ldhMfOrg.lineDetailInfo.lineForm" class="q-mt-sm"
            model-id="skuMfId"
            title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>料号</span>
                  <easy-input v-model="ldhMfOrg.lineDetailInfo.lineForm.sku" readonly></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>品名</span>
                  <easy-input v-model="ldhMfOrg.lineDetailInfo.lineForm.skuName" readonly></easy-input>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>原厂料号</span>
                  <easy-input v-model="ldhMfOrg.lineDetailInfo.lineForm.mfSku" :readonly="ldsMfOrg.isLineViewMode.value"
                    :error="v_mf_org$.mfSku.$error" :error-message="e$(v_mf_org$.mfSku.$errors)"></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>料号类型</span>
                  <simple-filter-select :error="v_mf_org$.mfType.$error" :error-message="e$(v_mf_org$.mfType.$errors)"
                    :options="$d.mfTypeDropdownList" :readonly="ldsMfOrg.isLineViewMode.value" :use-filter="false"
                    v-model="ldhMfOrg.lineDetailInfo.lineForm.mfType" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>有效</span>
                  <div class="bg-grey-3">
                    <q-checkbox :disable="ldsMfOrg.isLineViewMode.value" class="full-width q-pa-xs"
                      color="primary q-pa-xs"
                      dense v-model="ldhMfOrg.lineDetailInfo.lineForm.isEnabled" />
                  </div>
                </div>
                <div class="col-12">
                  <span>描述</span>
                  <easy-input v-model="ldhMfOrg.lineDetailInfo.lineForm.descriptions"
                    :readonly="ldsMfOrg.isLineViewMode.value"
                    :maxlength="300"></easy-input>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <!--先进先出列表-->
        <q-tab-panel class="q-pa-none" name="skuFifoList" v-if="isViewOrEditMode">
          <q-table :columns="columnsInfoMfContact" :rows="$d.form.skuFifos"
            v-model:pagination="$d.paginationInfoMfContact"
            :hide-pagination="true" @row-dblclick="(evt,row)=>{ldhMfContact.lineDetailNav.goViewLine(row.skuFifoId)}"
            dense row-key="skuFifoId" separator="cell" flat :visible-columns="$d.columnsInfoSkuFifos"
            v-model:selected="$d.selectedSkuFifos" selection="multiple"
            :loading="loadingState" color="primary">
            <template v-slot:body-selection="scope" >
              <q-checkbox dense v-model="scope.selected" @dblclick.stop />
            </template>
            <template v-slot:top="props">
              <div class="q-gutter-sm">
                <q-btn :disable="loadingState" @click="createSkuFifo" color="primary" icon="add" label="新建明细"
                  v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')" />
                <q-btn :disable="$d.selectedSkuFifos.length===0 || loadingState" @click="onDeleteSkuFifos" color="red"
                  icon="delete_outline" label="删除明细" v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')" />
              </div>
              <q-space />
              <table-col-options-cfg v-model:table-columns="columnsInfoMfContact"
                v-model:visible-columns="$d.columnsInfoSkuFifos"
                @update-col-options-for-save="(optToSave)=>dlAssist.saveDetailColOptions('skuFifoList',optToSave)"
                class="q-ml-sm">
              </table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                :title="props.inFullscreen ? '退出全屏' : '全屏显示'" class="q-ml-sm" dense flat :ripple="false" />
            </template>
            <template v-slot:body-cell-operation="props">
              <q-td :props="props" auto-width>
                <q-btn :dense="true" :disable="loadingState" class="btn-in-row"
                  @click="ldhMfContact.lineDetailNav.goViewLine(props.row.skuFifoId)" color="primary" label="查看"/>
                <q-btn :dense="true" :disable="loadingState"
                  @click="ldhMfContact.lineDetailNav.goEditLine(props.row.skuFifoId)" class="q-ml-xs btn-in-row" color="primary"
                  label="编辑" v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit')" />
              </q-td>
            </template>
            <template v-slot:body-cell-isDesc="props">
              <q-td :props="props">
                {{ props.row.isDesc === 0 ? '升序' : props.row.isDesc === 1 ? '降序' : '' }}
              </q-td>
            </template>
            <!--状态列插槽-->
            <template v-slot:body-cell-isEnabled="props">
              <q-td :props="props" auto-width>
                <q-badge :color="props.row.isEnabled ? 'positive' : 'grey-6'" :label="props.row.isEnabled ? '有效' : '无效'"
                  class="q-mr-xs" />
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <template v-slot:bottom>
              <paging-bar :loading-state="loadingState" :pageNo="$d.paginationInfoMfContact.page"
                :pageSize="$d.paginationInfoMfContact.rowsPerPage" :restrict-input-page-no="true"
                :show-refresh-button="false" :totalAmount="$d.form.skuFifos.length"
                @go-to-page="(pageNo)=>{$d.paginationInfoMfContact.page=pageNo}"
                @pagesize-changed="(pageSize)=>{$d.paginationInfoMfContact.rowsPerPage=pageSize; dlAssist.saveDetailPageSize('skuFifoList',pageSize)}" />
            </template>
          </q-table>
        </q-tab-panel>
        <!--先进先出详情-->
        <q-tab-panel class="q-pa-sm" name="skuFifoDetail">
          <div class="q-gutter-sm">
            <q-btn @click="ldhMfContact.lineDetailNav.backToListTab" color="primary" icon="close" outline title="关闭"
              v-if="ldsMfContact.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfContact" :loading="lineLoadingStateMfContact"
              @click="loadLineModelDataMfContact" color="primary" dense
              icon="refresh" outline title="刷新" v-if="ldsMfContact.isLineViewOrEditMode.value" />
            <q-btn :loading="submittingStateMfContact" @click="doMfContactLineSubmit" color="primary" label="确定"
              v-if="ldsMfContact.isLineCreateOrEditMode.value" />
            <q-btn :disable="submittingStateMfContact" @click="ldhMfContact.lineDetailNav.cancelLineSubmit" label="取消"
              outline
              v-if="ldsMfContact.isLineCreateOrEditMode.value" color="primary" />
            <q-btn :disable="lineLoadingStateMfContact" @click="ldhMfContact.lineDetailNav.turnLineToEditMode()"
              color="primary" icon="edit" label="编辑"
              v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit') && ldsMfContact.isLineViewMode.value" />
            <q-btn :disable="lineLoadingStateMfContact"
              @click="onDeleteSkuFifo(ldhMfContact.lineDetailInfo.lineItemId)" color="red" icon="delete_outline"
              label="删除"
              v-if="fx.hasModifyRight('Wms.Basic.Sku.Edit') && ldsMfContact.isLineViewMode.value" />
          </div>
          <q-banner class="text-white bg-red q-mt-sm" dense inline-actions v-if="serverErrorMessageMfContact">
            {{ serverErrorMessageMfContact }}
            <template v-slot:action>
              <q-btn @click="serverErrorMessageMfContact=''" dense flat icon="close" size="sm" />
            </template>
          </q-banner>
          <form-field-group :model-with-create-update="ldhMfContact.lineDetailInfo.lineForm" class="q-mt-sm"
            model-id="skuFifoId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>料号</span>
                  <easy-input v-model="ldhMfContact.lineDetailInfo.lineForm.sku" readonly></easy-input>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>品名</span>
                  <easy-input v-model="ldhMfContact.lineDetailInfo.lineForm.skuName" readonly></easy-input>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>批号属性</span>
                  <simple-filter-select :error="v_mf_contact$.lotAttr.$error"
                    :error-message="e$(v_mf_contact$.lotAttr.$errors)"
                    :options="filterLotAttrDropdownList" :readonly="ldsMfContact.isLineViewMode.value"
                    :use-filter="false"
                    v-model="ldhMfContact.lineDetailInfo.lineForm.lotAttr" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>排序方式</span>
                  <simple-filter-select :error="v_mf_contact$.isDesc.$error"
                    :error-message="e$(v_mf_contact$.isDesc.$errors)"
                    :options="$d.isDescDropdownList" :readonly="ldsMfContact.isLineViewMode.value" :use-filter="false"
                    v-model="ldhMfContact.lineDetailInfo.lineForm.isDesc" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <q-icon color="red" name="fas fa-asterisk" size="10px" />
                  <span>优先次序</span>
                  <simple-filter-select :error="v_mf_contact$.seq.$error" :error-message="e$(v_mf_contact$.seq.$errors)"
                    :auto-select-first-option="true" :options="$d.filterSeqDropdownList"
                    :readonly="ldsMfContact.isLineViewMode.value" :use-filter="false"
                    v-model="ldhMfContact.lineDetailInfo.lineForm.seq" />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>有效</span>
                  <div class="bg-grey-3">
                    <q-checkbox :disable="ldsMfContact.isLineViewMode.value" class="full-width q-pa-xs"
                      color="primary q-pa-xs" dense v-model="ldhMfContact.lineDetailInfo.lineForm.isEnabled" />
                  </div>
                </div>
                <div class="col-12">
                  <span>描述</span>
                  <easy-input v-model="ldhMfContact.lineDetailInfo.lineForm.descriptions"
                    :readonly="ldsMfContact.isLineViewMode.value"
                    :maxlength="300"></easy-input>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <!--规则配置-->
        <q-tab-panel class="q-pa-none" name="ruleConfig" v-if="isViewOrEditMode">
          <q-table :columns="columnsInfoRuleConfig" :rows="$d.tableData" :hide-pagination="true"
            :loading="listDataLoadingState" v-model:pagination="$d.paginationInfoRuleConfig" binary-state-sort color="primary"
            dense flat row-key="ruleConfigId" separator="cell">
            <!--顶部插槽-->
            <template v-slot:top="props">
              <!--功能按钮-->
              <div class="q-gutter-sm">
                <q-btn :disable="listDataLoadingState" @click="gotoRuleConfig" color="primary" label="转至规则配置"
                  icon="redo" />
              </div>
              <q-space />
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" :ripple="false"
                :title="props.inFullscreen ? '退出全屏' : '全屏显示'" @click="props.toggleFullscreen" class="q-ml-sm" dense
                flat />
            </template>
            <!--无数据提示-->
            <template v-slot:no-data>
              <div class="full-width items-center justify-center row">
                <q-icon name="error_outline" />
                无数据
                <q-btn :disable="listDataLoadingState" :loading="listDataLoadingState" @click="loadListData"
                  class="q-ml-sm" dense flat icon="refresh" size="sm" title="刷新"></q-btn>
              </div>
            </template>
            <template v-slot:bottom>
              <paging-bar :loading-state="listDataLoadingState" :pageNo="$d.paginationInfoRuleConfig.page"
                :pageSize="$d.paginationInfoRuleConfig.rowsPerPage" :restrict-input-page-no="true"
                :show-refresh-button="false" :totalAmount="$d.tableData.length"
                @go-to-page="(pageNo)=>{$d.paginationInfoRuleConfig.page=pageNo}"
                @pagesize-changed="(pageSize)=>{$d.paginationInfoRuleConfig.rowsPerPage=pageSize}" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="accessory" v-if="isViewOrEditMode">
          <accessory right-name-for-edit="Wms.Basic.Sku.Edit" :storage-id="detailInfo.itemId"
            :delete-url="'/wms/basic/sku/delete-sku-attachments/' + detailInfo.itemId"
            :recomment-url="'/wms/basic/sku/recomment-sku-attachment/' + detailInfo.itemId" storage-class="wm-sku"
            upload-url="/wms/basic/sku/upload-sku-attachments/" ref="accessoryComponent"
            :enable-pack-download="props.enableAccessoryPackDownload">
          </accessory>
        </q-tab-panel>
      </q-tab-panels>
    </div>
    <!--图片上传弹框-->
    <q-dialog transition-hide="none" transition-show="none" v-model="showingPicturesUploadDlg">
      <q-card style="max-width: 400px; width: 100%">
        <q-card-section class="q-pa-sm">
          <div class="text-h6">图片上传</div>
        </q-card-section>
        <q-separator />
        <!--错误提示-->
        <q-banner class="text-white bg-red q-mt-sm q-mx-sm" dense inline-actions v-if="errorMessageForPicturesUpload">
          {{ errorMessageForPicturesUpload }}
          <template v-slot:action>
            <q-btn @click="errorMessageForPicturesUpload = ''" dense flat icon="close" size="sm" />
          </template>
        </q-banner>
        <div class="q-pa-sm">
          <div class="row justify-between">
            <input multiple ref="picturesFileInput" type="file" />
          </div>
        </div>
        <q-separator class="separator" />
        <q-card-actions align="right">
          <q-btn @click="doUploadPictures" color="primary" label="确定" />
          <q-btn color="primary" label="取消" outline unelevated v-close-popup />
        </q-card-actions>
        <q-inner-loading :showing="uploadPicturesState">
          <q-spinner color="primary" size="50px" />
        </q-inner-loading>
      </q-card>
    </q-dialog>
    <!--图片展示弹框-->
    <q-dialog transition-hide="none" transition-show="none" v-model="showPictureDialog">
      <q-card style="max-width:80vw;max-height:90vh">
        <q-card-section class="q-pa-none">
          <img alt="" style="display: block" :src="fx.appCfg.apiBaseUrl +  `/comm/fms/file/`+ uuidOfPictureToShow" />
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'wmSkuStd'
}
</script>
<script lang="ts" setup>
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {Component, computed, reactive, ref} from 'vue'
import {MfOrgFull} from '@njt/foundation/defs/mf'
import useVuelidate from '@vuelidate/core'
import _ from 'lodash'
import {useLineDetailHelper} from '@njt/foundation/hooks/lineDetailHelper'
import {CodeLineForDropdown, MfLite} from '@njt/foundation/helper/dropdownlist.d'
import {WmBrandLite} from '@njt/wms/defs/basic/brand.d'
import {WmSku, WmSkuMf} from '@njt/wms/defs/basic/sku.d'
import {GetRuleConfigDbResp, WmRuleConfigDb} from '@njt/wms/defs/rule/ruleConfig.d'
import {WmPackageLite} from '@njt/wms/defs/basic/package.d'
import { MhlSkuExt } from 'src/defs/sf/sku';
interface PropsDef {
  // 页面选项，字段选项
  maxUploadSize?: number
  // 启用图片上传
  enableWmsSkuPicture?: boolean
  // 启用附件打包下载
  enableAccessoryPackDownload?: boolean
}

let props = withDefaults(defineProps<PropsDef>(), {
  maxUploadSize: 30,
  enableWmsSkuPicture: false,
  enableAccessoryPackDownload: $f.globalCfg.enableAccessoryPackDownload
})

const pageTitle = '料号管理'
useTitleHelper(pageTitle)

const validators = $f.validators

// 当前正在显示的tab
let showingTabPanel = ref('sku')

let $d = reactive({
  formExt: {} as MhlSkuExt,
  form: {
    skuPackage: {}
  } as WmSku,
  // mgOrg列表显示
  columnsInfoSkuMf: [] as string[],
  // 先进先出列显示
  columnsInfoSkuFifos: [] as string[],
  // mgOrg分页参数
  paginationInfoSkuMf: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 40,
    // 是否倒序
    descending: false,
    // 按什么排序
    sortBy: 'sortId'
  },
  // 明细多选
  selectedSkuMfs: [],
  // 多选
  selectedSkuFifos: [],
  // 分页参数
  paginationInfoMfContact: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 40,
    // 是否倒序
    descending: false,
    // 按什么排序
    sortBy: 'sortId'
  },

  // 货主
  storerDropdownList: [] as MfLite[],
  // 品牌获取
  brandDropdownList: [] as WmBrandLite[],
  //产品线
  productLineDropdownList: [] as CodeLineForDropdown[],
  // 料号主分类
  skuCategoryDropdownList: [] as CodeLineForDropdown[],
  // 料号次分类
  skuSubCategoryDropdownList: [] as CodeLineForDropdown[],
  // 国家
  cooDropdownList: [] as CodeLineForDropdown[],
  // 单位
  uomDropdownList: [] as CodeLineForDropdown[],
  // 包装规格下拉
  packageDropdownList: [] as WmPackageLite[],
  // 储位下拉
  locDropdownList: [] as Record<string, string | number | null | undefined>[],
  // 优先次序下拉
  seqDropdownList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  // 筛选后的优先次序
  filterSeqDropdownList: [] as number[],
  // 料号类型下拉
  mfTypeDropdownList: [
    {
      label: '供应商料号',
      value: 'Vendor'
    },
    {
      label: '原厂料号',
      value: 'MF'
    },
    {
      label: '零售料号',
      value: 'Retail'
    },
    {
      label: '其它料号',
      value: 'Other'
    }
  ],
  finalOrMaterialDropdownList: [
    {
      label: '成品',
      value: '成品'
    },
    {
      label: '原材料',
      value: '原材料'
    }
  ],
  inspectionOrFreeDropdownList: [
    {
      label: '检验',
      value: '检验'
    },
    {
      label: '免检',
      value: '免检'
    }
  ],
  // 批号属性下拉
  lotAttrDropdownList: [
    {
      label: '外部批号',
      value: 'v_lot'
    },
    {
      label: '入库日期',
      value: 'received_dt'
    },
    {
      label: '制造日期',
      value: 'date_code'
    },
    {
      label: '有效期',
      value: 'expired_dt'
    },
    {
      label: '产地',
      value: 'coo'
    },
    {
      label: '包装形态',
      value: 'package_type'
    },
    {
      label: '批次属性1',
      value: 'lot_attr01'
    },
    {
      label: '批次属性2',
      value: 'lot_attr02'
    },
    {
      label: '批次属性3',
      value: 'lot_attr03'
    },
    {
      label: '批次属性4',
      value: 'lot_attr04'
    },
    {
      label: '批次属性5',
      value: 'lot_attr05'
    },
    {
      label: '批次属性6',
      value: 'lot_attr06'
    },
    {
      label: '批次属性7',
      value: 'lot_attr07'
    },
    {
      label: '批次属性8',
      value: 'lot_attr08'
    },
    {
      label: '批次属性9',
      value: 'lot_attr09'
    },
    {
      label: '批次属性10',
      value: 'lot_attr10'
    },
    {
      label: '批次属性11',
      value: 'lot_attr11'
    },
    {
      label: '批次属性12',
      value: 'lot_attr12'
    },
    {
      label: '批次属性13',
      value: 'lot_attr13'
    },
    {
      label: '批次属性14',
      value: 'lot_attr14'
    },
    {
      label: '批次属性15',
      value: 'lot_attr15'
    },
    {
      label: '批次属性16',
      value: 'lot_attr16'
    },
    {
      label: '批次属性17',
      value: 'lot_attr17'
    },
    {
      label: '批次属性18',
      value: 'lot_attr18'
    },
    {
      label: '批次属性19',
      value: 'lot_attr19'
    },
    {
      label: '批次属性20',
      value: 'lot_attr20'
    }
  ],
  // 排序方式下拉
  isDescDropdownList: [
    {
      label: '升序',
      value: 0
    },
    {
      label: '降序',
      value: 1
    }
  ],
  // 周转率
  abcDropdownList: ['A', 'B', 'C'],
  tableData: [] as WmRuleConfigDb[],
})

// 展示的图片id
let uuidOfPictureToShow = ref('')
// 图片弹框显示
let showPictureDialog = ref(false)
// 图片上传状态
let uploadPicturesState = ref(false)
// 图片上传弹框
let showingPicturesUploadDlg = ref(false)
// 图片上传错误提示
let errorMessageForPicturesUpload = ref('')

const showPicture = function (uuid: string) {
  uuidOfPictureToShow.value = uuid
  showPictureDialog.value = true
}

const deletePicture = function (uuid: string) {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要删除此图片吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/wms/basic/sku/delete-sku-picture/' + uuid)
        .then(() => {
          $f.ui.closeMsgBox()
          loadModelData()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '删除失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

// region 主档相关
// 新建时候的默认值
const defFormDataForCreate = {
  isEnabled: true,
  allowMultilotPick: false,
  skuPackage: {
    packageId: null,
    packageType: null,
    qtyPEa: null,
    eaName: null,
    cube: null,
    nw: null,
    gw: null,
    cubeIsoUnit: null,
    weightIsoUnit: null,
    qtyPIip: null,
    iipName: null,
    iipL: null,
    iipW: null,
    iipH: null,
    iipIsoUnit: null,
    qtyPIp: null,
    ipName: null,
    ipL: null,
    ipW: null,
    ipH: null,
    ipIsoUnit: null,
    qtyPCase: null,
    caseName: null,
    caseH: null,
    caseL: null,
    caseW: null,
    caseIsoUnit: null
  }
}
// 错误信息内容
let serverErrorMessage = ref('')
// 数据加载状态
let loadingState = ref(false)

// 主档数据
const loadModelData = function () {
  serverErrorMessage.value = ''
  loadingState.value = true
  $f.axios
    .get<WmSku>('/wms/basic/sku/get-sku-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
      $d.filterSeqDropdownList = _.filter(
        $d.seqDropdownList,
        (o) => _.findIndex($d.form.skuFifos, {seq: o}) === -1
      )
      $d.selectedSkuFifos = []
      $d.selectedSkuMfs = []
      loadListData()
      $d.locDropdownList = [{locId: resp.data.paLocId, loc: resp.data.paLoc}]
      $d.packageDropdownList = [{packageId: resp.data.packageId, packageCode: resp.data.packageCode}]
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

// 主档验证相关
const rulesSku = {
  sku: {
    required: validators.required
  },
  storerId: {
    required: validators.required
  },
  packageId: {
    required: validators.required
  },
  moq: {
    int32: validators.int32,
    betweenClosed: validators.betweenClosed(0, 99999999)
  },
  minSafetyStock: {
    int32: validators.int32,
    betweenClosed: validators.betweenClosed(0, 99999999)
  },
  maxSafetyStock: {
    int32: validators.int32,
    betweenClosed: validators.betweenClosed(0, 99999999)
  },
  nw: {
    decimal: validators.decimal(12),
    betweenClosed: validators.betweenClosed(0, 99999),
    greater_than: validators.greaterThan(0)
  },
  gw: {
    decimal: validators.decimal(12),
    greaterEqualThan: validators.greaterEqualThan(computed(() => $d.form.nw)),
    betweenClosed: validators.betweenClosed(0, 99999),
    greater_than: validators.greaterThan(0),
  },
  cube: {
    decimal: validators.decimal(12),
    betweenClosed: validators.betweenClosed(0, 99999),
    greater_than: validators.greaterThan(0)
  },
  area: {
    decimal: validators.decimal(12),
    betweenClosed: validators.betweenClosed(0, 99999),
    greater_than: validators.greaterThan(0)
  },
  length: {
    int32: validators.int32,
    betweenClosed: validators.betweenClosed(0, 99999),
    greater_than: validators.greaterThan(0)
  },
  width: {
    int32: validators.int32,
    betweenClosed: validators.betweenClosed(0, 99999),
    greater_than: validators.greaterThan(0)
  },
  height: {
    int32: validators.int32,
    betweenClosed: validators.betweenClosed(0, 99999),
    greater_than: validators.greaterThan(0)
  }
}
const v$ = useVuelidate(rulesSku, computed(() => $d.form as any), {$autoDirty: true, $scope: false})

// 主档帮助方法
const {
  detailInfo,
  detailStatus,
  detailNav,
  dlAssist
} = useDetailHelper('/wms/basic/sku',
  $d.form,
  defFormDataForCreate,
  '/wms/basic/sku',
  '/wms/basic/sku/detail',
  '/wms/basic/sku/create',
  '/wms/basic/sku/edit',
  loadModelData,
  serverErrorMessage
)
const {
  isViewMode,
  isCreateMode,
  isEditMode,
  isCreateOrEditMode,
  isViewOrEditMode,
  pageSubTitle
} = detailStatus

// 删除主档
const deleteSku = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要删除该料号吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/wms/basic/sku/delete-skus', [detailInfo.itemId])
        .then(() => {
          $f.ui.closeMsgBox()
          detailNav.goBackToList()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '删除失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

let submittingState = ref(false)
// 主档新建/编辑确定
const doSkuSubmit = function () {
  serverErrorMessage.value = ''
  void v$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        $d.form.packageId = _.cloneDeep($d.form.skuPackage.packageId)
        let formParam = $f.misc.makeSimpleFormObj($d.form, ['skuPackage'])
        if (isCreateMode.value) {
          submittingState.value = true
          $f.axios
            .post('/wms/basic/sku/create-sku', formParam)
            .then(() => {
              detailNav.goBackToList()
            })
            .catch((err) => {
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingState.value = false
            })
        } else if (isEditMode.value) {
          submittingState.value = true
          $d.form.skuMfs = []
          $d.form.skuFifos = []
          $f.axios
            .post('/wms/basic/sku/update-sku', formParam)
            .then(() => {
              detailNav.doneEdit()
            })
            .catch((err) => {
              serverErrorMessage.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingState.value = false
            })
        }
      }
    })
}
// endregion

// region 原厂料号数据相关
// 列参数
let columnsInfoSkuMf: ColumnInfo[] = [
  {
    name: 'operation',
    label: '操作',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true
  },
  {
    label: '原厂料号ID',
    name: 'skuMfId',
    field: 'skuMfId',
    align: 'left',
    defOrder: 2,
    sortable: true,
    defVisible: true
  },
  {
    label: '料号ID',
    name: 'skuId',
    field: 'skuId',
    align: 'left',
    defOrder: 3,
    defVisible: false
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 4,
    defVisible: true
  },
  {
    label: '品名',
    name: 'skuName',
    field: 'skuName',
    align: 'left',
    defOrder: 5,
    defVisible: true
  },
  {
    label: '料号类型',
    name: 'mfType',
    field: 'mfType',
    align: 'left',
    defOrder: 6,
    defVisible: true,
    format: (value: string) => $f.fmt.fmtSkuType(value)
  },
  {
    label: '原厂料号',
    name: 'mfSku',
    field: 'mfSku',
    align: 'left',
    defOrder: 7,
    defVisible: true
  },
  {
    label: '描述',
    name: 'descriptions',
    field: 'descriptions',
    align: 'left',
    defOrder: 8,
    defVisible: false
  },
  {
    label: '状态',
    name: 'isEnabled',
    field: 'isEnabled',
    align: 'left',
    defOrder: 9,
    defVisible: true
  }
]

// 错误信息内容
let serverErrorMessageMfOrg = ref('')
// 加载状态
let lineLoadingStateMfOrg = ref(false)

// 原厂料号数据详情
const loadLineModelDataMfOrg = function () {
  lineLoadingStateMfOrg.value = true
  $f.axios
    .get<WmSkuMf>('/wms/basic/sku/get-sku-mf-by-id/' + String(ldhMfOrg.lineDetailInfo.lineItemId))
    .then((resp) => {
      ldhMfOrg.lineDetailInfo.lineForm = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineLoadingStateMfOrg.value = false
    })
}
const ldhMfOrg = useLineDetailHelper(
  '原厂料号',
  'skuMfList',
  'skuMfDetail',
  null,
  loadLineModelDataMfOrg,
  showingTabPanel,
  serverErrorMessageMfOrg,
  () => {
    v_mf_org$.value.$reset()
  }
)

const ldsMfOrg = ldhMfOrg.lineDetailStatus
// 新建明细
const createSkuMf = function () {
  ldhMfOrg.lineDetailNav.goCreateLine({
    skuId: $d.form.skuId,
    sku: $d.form.sku,
    skuName: $d.form.skuName,
    mfType: null,
    mfSku: null,
    isEnabled: true,
    descriptions: null
  })
}

// 批量删除原厂料号
const onDeleteSkuMfs = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要删除选中原厂料号吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/wms/basic/sku/delete-sku-mfs', _.map($d.selectedSkuMfs, 'skuMfId'))
        .then(() => {
          $f.ui.closeMsgBox()
          $d.selectedSkuMfs = []
          loadModelData()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '删除失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

// 分子公司验证
const rulesMfOrg = {
  mfSku: {
    required: validators.required
  },
  mfType: {
    required: validators.required
  }
}

const v_mf_org$ = useVuelidate(rulesMfOrg, computed(() => ldhMfOrg.lineDetailInfo.lineForm as any), {$autoDirty: true, $scope: false})

// 提交状态
let submittingStateMfOrg = ref(false)

// 新建/编辑确定
const doMfOrgLineSubmit = function () {
  serverErrorMessageMfOrg.value = ''
  void v_mf_org$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        let lineFormParam = $f.misc.removePropertyOfNull(ldhMfOrg.lineDetailInfo.lineForm)
        if (ldsMfOrg.isLineCreateMode.value) {
          submittingStateMfOrg.value = true
          $f.axios
            .post('/wms/basic/sku/create-sku-mf', lineFormParam)
            .then(() => {
              ldhMfOrg.lineDetailNav.backToListTab()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfOrg.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfOrg.value = false
            })

        } else if (ldsMfOrg.isLineEditMode.value) {
          submittingStateMfOrg.value = true
          $f.axios
            .post('/wms/basic/sku/update-sku-mf', lineFormParam)
            .then(() => {
              ldhMfOrg.lineDetailNav.doneLineEdit()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfOrg.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfOrg.value = false
            })

        }
      }
    })

}

// 删除明细
const onDeleteSkuMf = function (itemId: string | number) {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要删除此原厂料号吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/wms/basic/sku/delete-sku-mfs', [itemId])
        .then(() => {
          $f.ui.closeMsgBox()
          loadModelData()
          ldhMfOrg.lineDetailNav.backToListTab()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '删除失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}
// endregion

// region 先进先出
// 列参数
let columnsInfoMfContact: ColumnInfo[] = [
  {
    name: 'operation',
    label: '操作',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true
  },
  {
    label: '先进先出ID',
    name: 'skuFifoId',
    field: 'skuFifoId',
    align: 'left',
    defOrder: 2,
    sortable: true,
    defVisible: true
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 3,
    defVisible: true
  },
  {
    label: '品名',
    name: 'skuName',
    field: 'skuName',
    align: 'left',
    defOrder: 4,
    defVisible: true
  },
  {
    label: '批号属性',
    name: 'lotAttr',
    field: 'lotAttr',
    align: 'left',
    defOrder: 5,
    defVisible: true,
    format: (value: string) => $f.fmt.fmtLotAttr(value)
  },
  {
    label: '排序方式',
    name: 'isDesc',
    field: 'isDesc',
    align: 'left',
    defOrder: 6,
    defVisible: true
  },
  {
    label: '优先次序',
    name: 'seq',
    field: 'seq',
    align: 'left',
    defOrder: 7,
    defVisible: true
  },
  {
    label: '描述',
    name: 'descriptions',
    field: 'descriptions',
    align: 'left',
    defOrder: 8,
    defVisible: false
  },
  {
    label: '状态',
    name: 'isEnabled',
    field: 'isEnabled',
    align: 'left',
    defOrder: 9,
    defVisible: true
  }
]
// 错误信息内容
let serverErrorMessageMfContact = ref('')
// 加载状态
let lineLoadingStateMfContact = ref(false)

// 数据详情
const loadLineModelDataMfContact = function () {
  lineLoadingStateMfContact.value = true
  $f.axios
    .get<MfOrgFull>('/wms/basic/sku/get-sku-fifo-by-id/' + String(ldhMfContact.lineDetailInfo.lineItemId))
    .then((resp) => {
      ldhMfContact.lineDetailInfo.lineForm = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineLoadingStateMfContact.value = false
    })
}

const ldhMfContact = useLineDetailHelper(
  '先进先出',
  'skuFifoList',
  'skuFifoDetail',
  null,
  loadLineModelDataMfContact,
  showingTabPanel,
  serverErrorMessageMfContact,
  () => {
    v_mf_contact$.value.$reset()
  }
)
const ldsMfContact = ldhMfContact.lineDetailStatus

// 新建明细
const createSkuFifo = function () {
  ldhMfContact.lineDetailNav.goCreateLine({
    skuId: $d.form.skuId,
    sku: $d.form.sku,
    skuName: $d.form.skuName,
    isEnabled: true,
    isDesc: 0,
    descriptions: null
  })
}

// 验证
const rulesMfContact = {
  lotAttr: {
    required: validators.required
  },
  isDesc: {
    required: validators.required
  },
  seq: {
    required: validators.required
  }
}

const v_mf_contact$ = useVuelidate(rulesMfContact, computed(() => ldhMfContact.lineDetailInfo.lineForm as any), {$autoDirty: true, $scope: false})

// 提交状态
let submittingStateMfContact = ref(false)

// 新建/编辑确定
const doMfContactLineSubmit = function () {
  serverErrorMessageMfContact.value = ''
  void v_mf_contact$.value
    .$validate()
    .then((valRes) => {
      if (valRes) {
        let lineFormParam = $f.misc.removePropertyOfNull(ldhMfContact.lineDetailInfo.lineForm)
        if (ldsMfContact.isLineCreateMode.value) {
          submittingStateMfContact.value = true
          $f.axios
            .post('/wms/basic/sku/create-sku-fifo', lineFormParam)
            .then(() => {
              ldhMfContact.lineDetailNav.backToListTab()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfContact.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfContact.value = false
            })

        } else if (ldsMfContact.isLineEditMode.value) {
          submittingStateMfContact.value = true
          $f.axios
            .post('/wms/basic/sku/update-sku-fifo', lineFormParam)
            .then(() => {
              ldhMfContact.lineDetailNav.doneLineEdit()
              loadModelData()
            })
            .catch((err) => {
              serverErrorMessageMfContact.value = $f.getAxiosErrMsg(err)
            })
            .finally(() => {
              submittingStateMfContact.value = false
            })

        }
      }
    })

}
// 删除多个
const onDeleteSkuFifos = function () {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要删除选中先进先出吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/wms/basic/sku/delete-sku-fifos', _.map($d.selectedSkuFifos, 'skuFifoId'))
        .then(() => {
          $f.ui.closeMsgBox()
          $d.selectedSkuFifos = []
          loadModelData()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '删除失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

// 删除明细
const onDeleteSkuFifo = function (itemId: string | number) {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确定要删除此先进先出吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/wms/basic/sku/delete-sku-fifos', [itemId])
        .then(() => {
          $f.ui.closeMsgBox()
          loadModelData()
          ldhMfContact.lineDetailNav.backToListTab()

        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '删除失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

let filterLotAttrDropdownList = computed(() => {
  if (ldsMfContact.isLineCreateMode.value) {
    return _.filter($d.lotAttrDropdownList, (o) => _.findIndex($d.form.skuFifos, {lotAttr: o.value}) === -1)
  } else if (ldsMfContact.isLineEditMode.value) {
    return _.filter($d.lotAttrDropdownList, (o) => (_.findIndex($d.form.skuFifos, {lotAttr: o.value}) === -1) || (o.value === ldhMfContact.lineDetailInfo.lineForm.lotAttr))
  } else {
    return $d.lotAttrDropdownList
  }
})
// endregion

// 规则配置
// 列参数
let columnsInfoRuleConfig: ColumnInfo[] = [
  {
    label: '规则配置ID',
    name: 'ruleConfigId',
    field: 'ruleConfigId',
    align: 'left',
    defOrder: 2,
    sortable: true,
    defVisible: true
  },
  {
    label: '仓库ID',
    name: 'whId',
    field: 'whId',
    align: 'left',
    defOrder: 3,
    defVisible: false
  },
  {
    label: '仓库简称',
    name: 'whName',
    field: 'whName',
    align: 'left',
    defOrder: 4,
    sortable: true,
    defVisible: true
  },
  {
    label: '货主ID',
    name: 'storerId',
    field: 'storerId',
    align: 'left',
    defOrder: 5,
    defVisible: false
  },
  {
    label: '货主名称',
    name: 'storerAbbrName',
    field: 'storerAbbrName',
    align: 'left',
    defOrder: 6,
    sortable: true,
    defVisible: true
  },
  {
    label: '品牌ID',
    name: 'brandId',
    field: 'brandId',
    align: 'left',
    defOrder: 7,
    defVisible: false
  },
  {
    label: '品牌名称',
    name: 'brandName',
    field: 'brandName',
    align: 'left',
    defOrder: 8,
    sortable: true,
    defVisible: true
  },
  {
    label: '料号ID',
    name: 'skuId',
    field: 'skuId',
    align: 'left',
    defOrder: 9,
    defVisible: false
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 10,
    sortable: true,
    defVisible: true
  },
  {
    label: '品名',
    name: 'skuName',
    field: 'skuName',
    align: 'left',
    defOrder: 11,
    sortable: true,
    defVisible: true
  },
  {
    label: '规则名称',
    name: 'ruleName',
    field: 'ruleName',
    align: 'left',
    defOrder: 12,
    sortable: true,
    defVisible: true,
    format: (value: string) => $f.fmt.fmtWmsRuleConfig(value)
  },
  {
    label: '规则值',
    name: 'ruleValueDisp',
    field: 'ruleValueDisp',
    align: 'left',
    defOrder: 13,
    defVisible: true
  }
]

const onPackageChange = function (e: WmPackageLite) {
  if (e) {
    $f.misc.simpleAssign($d.form.skuPackage, e)
  } else {
    $d.form.skuPackage = {
      packageId: null,
      packageType: null,
      qtyPEa: null,
      eaName: null,
      cube: null,
      nw: null,
      gw: null,
      cubeIsoUnit: null,
      weightIsoUnit: null,
      qtyPIip: null,
      iipName: null,
      iipL: null,
      iipW: null,
      iipH: null,
      iipIsoUnit: null,
      qtyPIp: null,
      ipName: null,
      ipL: null,
      ipW: null,
      ipH: null,
      ipIsoUnit: null,
      qtyPCase: null,
      caseName: null,
      caseH: null,
      caseL: null,
      caseW: null,
      caseIsoUnit: null
    }
  }
}

// 加载状态
let listDataLoadingState = ref(false)

const loadListData = function () {
  listDataLoadingState.value = true
  $f.axios.get<GetRuleConfigDbResp>('/wms/rule/config/get-rule-configs-list', {params: {
      storerId: $d.form.storerId,
      skuId: $d.form.skuId,
      pageNo: 1,
      pageSize: 0x7fffffff
    }})
    .then((resp) => {
      $d.selectedSkuMfs = []
      $d.tableData = resp.data.ruleConfigList
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}
// 跳转规则配置
const gotoRuleConfig = function () {
  let urlPath = $f.router.resolve({name: '/wms/rule/ruleconfig', query: { storerId: $d.form.storerId, skuId: $d.form.skuId, sku: $d.form.sku }})
  window.open(urlPath.href, '_blank')
}

let picturesFileInput = ref()
// 图片上传确定按钮
const doUploadPictures = function () {
  // 检查文件总大小是否超过指定的尺寸
  let totalSize = 0
  uploadPicturesState.value = true
  let formData = new window.FormData()
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
  _.forEach(picturesFileInput.value.files, (v) => {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
    formData.append('Files', v)
    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
    totalSize += v.size
  })
  totalSize /= 1000 * 1000
  if (totalSize >= props.maxUploadSize) {
    uploadPicturesState.value = false
    errorMessageForPicturesUpload.value = '要上传的文件的总大小超过了' + String(props.maxUploadSize) + 'MB，请考虑分多次上传'
    return
  }
  $f.axios
    .post('/wms/basic/sku/upload-sku-pictures/' + detailInfo.itemId, formData)
    .then(() => {
      showingPicturesUploadDlg.value = false
      $f.ui.showNotifySucceeded('图片上传成功')
      // @ts-ignore
      accessoryComponent.value?.loadListData()
      loadModelData()
    })
    .catch((err) => {
      errorMessageForPicturesUpload.value = $f.getAxiosErrMsg(err)
    })
    .finally(() => {
      uploadPicturesState.value = false
    })
}

// region 初始化
// SkuMf
let colsInfoSavedMfOrg = dlAssist.loadDetailColOptions('skuMfList', columnsInfoSkuMf)
columnsInfoSkuMf = colsInfoSavedMfOrg[0]
$d.columnsInfoSkuMf = colsInfoSavedMfOrg[1]
$d.paginationInfoSkuMf.rowsPerPage = dlAssist.loadDetailPageSize('skuMfList')

//MfContact
let colsInfoSavedMfContact = dlAssist.loadDetailColOptions('skuFifoList', columnsInfoMfContact)
columnsInfoMfContact = colsInfoSavedMfContact[0]
$d.columnsInfoSkuFifos = colsInfoSavedMfContact[1]
$d.paginationInfoMfContact.rowsPerPage = dlAssist.loadDetailPageSize('skuFifoList')

//获取货主
void $f.lst.getMfSimpleList({isStorer: true})
  .then((resp) => {
    $d.storerDropdownList = resp.mfLiteList
  })
// 获取品牌
void $f.lst.getBrandSimpleList()
  .then((resp) => {
    $d.brandDropdownList = resp
  })
// 获取产品线
void $f.lst.getCodeForDropdown('ProductLine')
  .then((resp) => {
    $d.productLineDropdownList = resp
  })
// 获取料号主分类
void $f.lst.getCodeForDropdown('SkuCategory')
  .then((resp) => {
    $d.skuCategoryDropdownList = resp
  })
// 获取料号次分类
void $f.lst.getCodeForDropdown('SkuSubCategory')
  .then((resp) => {
    $d.skuSubCategoryDropdownList = resp
  })
// 国家
void $f.lst.getCodeForDropdown('Country')
  .then((resp) => {
    $d.cooDropdownList = resp
  })
// 单位
void $f.lst.getCodeForDropdown('UOM')
  .then((resp) => {
    $d.uomDropdownList = resp
  })
const packageTypeDropdownList = [
  {
    label: 'Case-箱',
    value: 'Case'
  },
  {
    label: 'IP-盒',
    value: 'IP'
  },
  {
    label: 'IIP-内盒',
    value: 'IIP'
  },
  {
    label: 'Piece-散货',
    value: 'Piece'
  }
]
const accessoryComponent = ref<Component>()
const fx = $f
const e$ = $f.getFieldErrStr
// endregion
</script>

<style lang="sass" scoped>
.btn-del-pic
  background: rgba($grey-10, .3)

.sku-pic-size
  width: 60px
  height: 60px
</style>
